<template>
	<view>
		<loading-view v-if="isFirstLoading"></loading-view>
		<view v-if="!indexDistribution.distribution_agent_name || !isLogin" class="" style="height: 100vh;">
			<!-- <u-loading size="40" color="#00632B" mode="circle" :show="showLoading"></u-loading> -->
			<router-link to="/pages/login/login" v-show="!indexDistribution.distribution_agent_name  || !isLogin">
				<image style="height: 100vh; width: 100vw;" :src="imgUrl + '/wechat/static/images/nologin_index.jpg'">
				</image>
			</router-link>
		</view>
		<view v-else>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
				<view>
					<view class="today-new-product" style="z-index:1; position: relative;">
						<view class="top_shop_logo">
							<view class="index index-bg" style="position: fixed; z-index: 999; left:1rpx; top: 1rpx;">
								<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
									<view class="index-bg" :style="'padding-top:'+ menuButtonInfo.top+'px'">
										<view class="flex-1 flex row" :style="'height:'+menuButtonInfo.height+'px'">
											<!-- 店铺 -->
											<view class="flex-1" :style="'line-height:'+menuButtonInfo.height+'px'">
												<view class="header-one flex nr">
													<u-avatar @click="goDistributionPage()" :src="indexDistribution.avatar"
														size="48" style="margin-top: 17rpx;"></u-avatar>
													<view @click="goDistributionPage()" class="m-l-10 xs"
														style="width: 170rpx; text-align: left;">
														<text
															style="color: white;">{{ indexDistribution.distribution_agent_name }}的小店</text>
													</view>
													<view class="logo_text">
														<view class="logo">
															<image style="width: 229rpx; height: 49rpx;"
																src="../../static/images/joyloop_logo.png"></image>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</u-sticky>
							</view>
						</view>
						<uni-swiper-dot :current="todayKey" :info="todayNewProducts" mode="square">
							<swiper class="bigImg" :current="todayKey" :autoplay="isSwiperAutoPlay"  interval="5000" duration="1000" @change="changeswiper">
								<swiper-item v-for="(big,todayKey) in todayNewProducts" :key="todayKey">
									<view class="preview-image-bar" @click="goSwiperPage(big)">
										<image class="preview-image" mode='aspectFill' :src="big.image" lazy-load>
										</image>
									</view>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>
						<view class="choose_box">
							<view class="choose_button" @tap="goSwiperPage(todayNewProducts[todayKey])">
								{{todayNewProducts[todayKey].title}}
							</view>
							<view class="choose_button" @tap="goSwiperPage()"
								v-if="todayNewProducts[todayKey].title == '选购羽绒服'">全部商品</view>
						</view>
						<view class="down_icon">
							<image class="small_icon" style="width: 40rpx; height: 46rpx;"
								src="../../static/images/arrow_down.gif"></image>
						</view>
						<view class="thumb-images">
							<swiper class="thumb-item" :current="todayKey" :autoplay="false">
								<swiper-item v-for="(item2,index2) in todayNewProducts" :key="index2">
									<view class="swiper-item-view">
										<view v-for="(goods2,i) in item2.rel_goods_list" :key="i">
											<image
												@click="goPage({path:'/pages/goods_details/goods_details?id=' + goods2.id})"
												class="thumb" :src="goods2.image" mode="aspectFill" lazy-load></image>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<!-- 今日新品结束 -->
					<!-- 热门搜索 羽绒未来 -->
					<view class="summer-hot-product">
						<view class="title">羽绒未来</view>
						<view class="title_sub">SERIES SHOW</view>
						<view class="category-list">
							<view v-for="(item,indexcate) in storeCatgoryList" :key="indexcate"
								@click="goCatPage(item)">
								<view class="category-item">
									<image style="width: 180rpx; height: 150rpx;" :src="item.image"></image>
									<!-- <view class="category-title">
									{{item.title}}
								</view> -->
								</view>
							</view>
						</view>
					</view>
					<view class="index_block">
						<!-- {path:firstCat.link + '?' +  /pages/goods_list/goods_list?currentCate2Id=20&cate3Id=12&selectIndex=0'} -->
						<view class="block_title" @click="goCatPage(firstCat)">
							<view class="title">{{firstCat.title}}</view>
							<view class="title_sub"> <u-icon size="28" name="arrow-down"></u-icon> </view>
						</view>
						<view class="block_content">
							<view class="block_main_image" style="margin-top: 30rpx; margin-bottom: 50rpx;"
								@click="goCatPage(firstCat)">
								<image style="width: 750rpx; height: 750rpx;" :src="firstCat.image"></image>
							</view>
							<view class="list" style="margin-top: 50rpx;">
								<view class="list-item" v-for="(item,index) in catGoodsList1" :key="index">
									<view @click="goPage({path:'/pages/goods_details/goods_details?id=' + item.id})">
										<u-icon-stop @click.stop="collectGoodsFun(item)" class="heart_icon_badge"
											color="#00632B" size="40"
											:name="item.is_collect == 1 ? 'heart-fill' : 'heart'"></u-icon-stop>
										<image class="thumb" style="width: 320rpx; height: 427rpx;" mode="aspectFill"
											:src="item.image"></image>
										<view class="product-title">{{item.name}}</view>
										<view class="con">
											<view class="price">￥{{item.min_price}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="block_bottom" @click="goCatPage(firstCat)">
								<view class="block_bottom_link">选购更多 <u-icon class="block_bottom_link_icon" size="30"
										name="arrow-rightward"></u-icon> </view>
							</view>
						</view>
					</view>
					<view class="index_block">
						<view class="block_title" @click="goCatPage(secondCat)">
							<view class="title">{{secondCat.title}}</view>
							<view class="title_sub"> <u-icon size="28" name="arrow-down"></u-icon> </view>
						</view>
						<view class="block_content">
							<view class="block_main_image" style="margin-top: 30rpx; margin-bottom: 50rpx;"
								@click="goCatPage(secondCat)">
								<image style="width: 750rpx; height: 750rpx;" :src="secondCat.image"></image>
							</view>
							<view class="list" style="margin-top: 50rpx;">
								<view class="list-item" v-for="(item,index) in goodsList" :key="index">
									<view @click="goPage({path:'/pages/goods_details/goods_details?id=' + item.id})">
										<u-icon-stop @click.stop="collectGoodsFun(item)" class="heart_icon_badge"
											color="#00632B" size="40"
											:name="item.is_collect == 1 ? 'heart-fill' : 'heart'"></u-icon-stop>
										<image class="thumb" style="width: 320rpx; height: 427rpx;" mode="aspectFill"
											:src="item.image"></image>
										<view class="product-title">{{item.name}}</view>
										<view class="con">
											<view class="price">￥{{item.min_price}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="block_bottom" @click="goCatPage(secondCat)">
								<view class="block_bottom_link">选购更多 <u-icon class="block_bottom_link_icon" size="30"
										name="arrow-rightward"></u-icon> </view>
							</view>
						</view>
					</view>
					<view class="fixed-button" v-if="showContact">
						<router-link to="/bundle/pages/contact_offical/contact_offical">
							<image style="width: 75rpx; height: 75rpx;"
								:src="imgUrl + '/wechat/static/images/icon_contact.png'">
							</image>
						</router-link>
					</view>
					<tabbar></tabbar>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import {
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	import {
		getMenu,
		getHome,
		// getHotGoods,
		// getLevelOneList,
		getGoodsList
	} from "@/api/store"
	import {
		// getUser,
		collectGoods,
		apiDistributionPoster
	} from '@/api/user'
	import {
		currentPage,
		getRect
	} from '@/utils/tools'
	const app = getApp()
	const homeItem = {
		name: '首页'
	}
	import Cache from '@/utils/cache'
	import {
		DISTRIBUTION,
		DISTRIBUTIONID,
		TABBAROPTION,
		MYDISTRIBUTION,
		WECHATSCENECODE
	} from '@/config/cachekey';
	export default {
		mixins: [MescrollMixin, MescrollCompMixin],
		data() {
			return {
				isSwiperAutoPlay:false,
				isFirstLoading: true,
				showContact: false,
				lastScrollTopDistance: 0,
				isScrollingDown: false,
				indexFirstScroll: 1,
				offPrompt: true,
				active: 0,
				navBg: 0,
				goodsList: [],
				catGoodsList1: [],
				homeData: {},
				navList: [],
				enable: true,
				cateList: [homeItem],
				cateIndexList: [],
				showCateList: [],
				showShareBtn: false,
				liveLists: [],
				poster: "",
				slogan: "",
				mini_url: "",
				getLevelOneId: 0,
				src: "../../static/images/portrait_empty.png",
				imgUrl: `${this.$imgUrl}`,
				menuButtonInfo: {},
				//最新
				itemWidth: 0, //每个item的宽度
				totalWidth: 10000, //设置一个默认总宽度
				scrollLeft: 0, //滑动距离

				tabTopCurrent: 0,
				mycurrent: 0,
				activeWidth: 0,
				swiperHeight: 0,
				swiperImageHeight: 0,
				// topPoster: {},
				tabTopList: [],
				todayNewProducts: [],
				todayKey: 0,
				bigImage: '',
				seasonHotProducts: [],
				singleHotPorducts: [],
				storeCatgoryList: [],
				morePoductsList: [],
				currProductId: 0,
				currProductUrl: "",
				currSingImg: "",
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					offset: 80,
				},
				spa: -2, // 每次滚动的跨度（正数向右，负数向左，默认向左滚动）
				timer1: null,
				ulLeft: 0,
				firstCat: {},
				secondCat: {},
				// temp: '--myfirst: -440px;',
				offsetL: "0",
				offsetStart: 0,
				page: {
					num: 1,
					size: 10
				},
				hasNext: true,
				firstScrollItemWidth: 0,
				scrollItemWidth: 0,
				scrollItemHeight: 0,
				offsetStartPx: "0px",
				animationState: 'paused',
				// newImangeWidth: 0,
			}
		},
		onLoad(options) {
			//joyloop分类
			this.getCatProductList(12);
			console.log('====index.vue==onLoad======');
			// uni.hideTabBar();
			// 选择城市后是否刷新
			//if(options?.refresh) await this.getHomeFun()
			uni.$on('refreshhome', () => {
				this.getHomeFun()
			})
			// console.log('-----------distribution----------');
			// console.log(this.distribution);
			// #ifdef MP-WEIXIN
			this.getMenuButtonInfo()
			// #endif

		},

		onUnload() {
			uni.$off('refreshhome')
			// clearTimeout(this.scrollTimeout);
			// clearTimeout(this.scrollTimeout2);
			// this.stopAnimation();
		},
		onShow() {
			this.isSwiperAutoPlay = true;
		
			// console.log('==index.vue===onShow===DISTRIBUTION=====');
			// console.log(Cache.get(DISTRIBUTION));
			// console.log('===index.vue====WECHATSCENECODE=============');
			// console.log(Cache.get(WECHATSCENECODE));
			if (!this.isLogin) {
				uni.hideTabBar();
			}
			setTimeout(() => {
				this.isFirstLoading = false;
			}, 6000)
			
			const {
				route
			} = currentPage()
			if (route == 'pages/index/index2') {
				this.indexScrollToCover();
			}
			console.log('======index.vue==onShow==this.indexDistribution===============');
			console.log(this.indexDistribution);
					
			this.enable = this.active == 0 ? true : false
			this.poster = this.appConfig.share.mnp_share_image
			this.slogan = this.appConfig.share.mnp_share_title
	

			//购物车数量
			// this.getCartNum()
		},
		onHide() {
			this.isSwiperAutoPlay = false;
			console.log('==index.vue==this.isSwiperAutoPlay');
			console.log(this.isSwiperAutoPlay);
			// #ifdef H5
			this.enable = false
			// #endif
		},
		onReady() {
			// #ifdef MP
			// 关闭胶囊提示
			// this.offPromptFunc();
			// #endif
		},
		async onShareAppMessage() {
			const {
				poster,
				distribution,
				indexDistribution
			} = this;
			return {
				title: indexDistribution.distribution_agent_name + "的小店",
				imageUrl: poster,
				path: '/pages/index/index?&invite_code=' + indexDistribution.invite_code + "&distributionId=" + indexDistribution.id,
			};
		},
		onReachBottom() {
			console.log('触底加载')
			if (this.hasNext) {
				this.getMoreProductList()
			}
		},
		methods: {
			goCatPage(catInfo) {
				let queryString = '';
				if (catInfo.params && typeof catInfo.params === 'object') {
					queryString = Object.keys(catInfo.params)
						.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(catInfo.params[key])}`)
						.join('&');
				}
				console.log('--------catInfo---------');
				console.log(catInfo);
				let fullUrl = `${catInfo.link}?${queryString}`;
				fullUrl = fullUrl + '&nav_title=' + catInfo.title;
				console.log('=====fullUrl=========');
				console.log(fullUrl);
				uni.navigateTo({
					url: fullUrl
				});
			},

			goDistributionPage() {
				let myDistribution2 = this.myDistribution || Cache.get(MYDISTRIBUTION);
				if (myDistribution2.user_id && this.indexDistribution.user_id && (myDistribution2.user_id == this.indexDistribution.user_id)) {
					uni.navigateTo({
						url: '/bundle/pages/user_spread/user_spread'
					});
				} else {
					this.$Router.push({
						path: '/bundle/pages/contact_offical/contact_offical',
					})
				}
			},
			goPage(url) {
				uni.navigateTo({
					url: url.path
				});
			},
			goTabPage(url, options) {
				if (options) {
					Cache.set(TABBAROPTION, options);
				}
				uni.switchTab({
					url: url
				});
			},
			async collectGoodsFun(item) {
				const {
					msg,
					code
				} = await collectGoods({
					goods_id: item.id
				});
				if (code == 1) {
					this.$toast({
						title: msg
					});
					item.is_collect = !item.is_collect;
				}
				// 	// this.getGoodsDetailFun();
			},
			goSwiperPage(item = {}) {
				let {
					link = '/bundle/pages/ad_goods_list/ad_goods_list',
						link_type = 1,
						params = {},
						is_tab = false
				} = item;
				switch (link_type) {
					case 1:
					case 2:
						if (is_tab) {
							this.$Router.pushTab({
								path: link
							});
						} else {
							this.$Router.push({
								path: link,
								query: params
							})
						}
						break;
					case 3:
						this.$Router.push({
							path: '/pages/webview/webview',
							query: {
								url: link
							}
						})
						break;
				}
			},
			//打开就相当于自动滑动了，可用！！！
			indexScrollToCover() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			// ...mapActions(['getCartNum']),
			...mapMutations(['setDistributionId', 'setDistribution']),
			// #ifdef MP
			getMoreProductList() {
				let that = this
				let pageNum = this.page.num; // 页码, 默认从1开始
				let pageSize = this.page.size; // 页长, 默认每页10条
				getGoodsList({
					page_size: pageSize,
					page_no: pageNum,
					// platform_cate_id: 9,
					
					shop_id:1,
					brand_id:4,
				}).then(({
					data
				}) => {
					this.isFirstLoading =false;
					let curPageData = data.lists;
					let curPageLen = curPageData ? curPageData.length : 0;
					let hasNext = !!data.more;
					if (that.page.num == 1) this.goodsList = [];
					this.goodsList = this.goodsList.concat(curPageData);
					that.page.num++
					that.hasNext = hasNext
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
			getCatProductList(cateId) {
				let that = this
				let pageNum = 1; // 页码, 默认从1开始
				let pageSize = 6; // 页长, 默认每页10条
				getGoodsList({
					page_size: pageSize,
					page_no: pageNum,
					shop_id:1,
					brand_id:1,
					// platform_cate_id: cateId
				}).then(({
					data
				}) => {
					this.isFirstLoading =false;
					// console.log('=======this.cat9GoodsList==============');
					// console.log(data.lists);
					this.catGoodsList1 = data.lists;
				})
			},
			getMenuButtonInfo() {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.menuButtonInfo.sum_top_height = this.menuButtonInfo.height + this.menuButtonInfo.top;
			},
			// #endif
			// 获取首页数据
			async getHomeFun() {
				const {
					code,
					data
				} = await getHome();
				// console.log("homedata", data)
				if (code == 1) {
					this.isFirstLoading =false;
					this.homeData = data
					// this.topPoster = data.index_top_poster[0]
					this.indexNewCategorize = data.index_new_categorize
					this.todayNewProducts = data.index_today_new;
					// this.bigImage = data.index_today_new[this.todayKey].params.image
					// this.currProductUrl = data.index_today_new[this.todayKey].link
					// this.currProductId = data.index_today_new[this.todayKey].params.id

					// this.seasonHotProducts = data.index_season_hot;
					// this.singleHotPorducts = data.index_single_hot;
					this.storeCatgoryList = data.index_shop_categorize;

					// this.currSingImg = data.index_single_hot[0].image;
					if (this.indexNewCategorize[0]) {
						this.firstCat = this.indexNewCategorize[0];
					}
					if (this.indexNewCategorize[1]) {
						this.secondCat = this.indexNewCategorize[1];
					}
					this.initSet()
				}
			},
			changeActive(index) {
				this.active = index
				this.enable = index == 0
				this.mescroll.optDown.use = index == 0
				this.showCateList[index] = true
			},
			async downCallback() {
				//await this.getLevelOneListFun()
				// await this.getMenuFun()
				await this.getHomeFun()
				// this.$refs.mescrollItem.getData()
				this.mescroll.endSuccess(0, false)

			},
			isLeave(id) {
				this.$Router.push({
					path: '/bundle/pages/contact_offical/contact_offical',
					query: {
						shop_id: id,
					}
				})
			},
			// 点击tab切换高亮，并进行滑动，（index-1）是为了点击项显示在第二栏的位置
			tabTopChange(index) {
				this.tabTopCurrent = index;
				this.scrollLeft = this.itemWidth * (index - 1);
			},
			// handlechange(e) {
			// 	this.mycurrent = e.detail.current
			// 	let length = this.singleHotPorducts.length
			// 	this.activeWidth = 280 / length * (e.detail.current + 1)
			// },
			setSwiperHeight() {
				this.$nextTick(() => {
					let tempWidth = 0;
					let tempHeight = 0;
					uni.getImageInfo({
						src: this.currSingImg,
						success: function(image) {
							if (image) {
								tempWidth = image.width
								tempHeight = image.height
							}
						}
					})
					if (this.distribution.distribution_agent_name) {
						uni.createSelectorQuery()
							.in(this)
							.select('.activeSwiper')
							.boundingClientRect()
							.exec(res => {
								tempHeight = tempHeight ? tempHeight : 1735;
								tempWidth = tempWidth ? tempWidth : 985;
								let imageHeight = 1735;
								if (res[0]) {
									let imageWidth = res[0].width;
									let imageHeight = imageWidth * tempHeight / tempWidth;
								}
								this.swiperImageHeight = imageHeight * 2 //按照rpx
								this.swiperHeight = imageHeight
							})
					}
				})
			},

			// changeTodayBigImage(index) {
			// 	this.todayKey = index
			// 	this.bigImage = this.todayNewProducts[index].params.image
			// 	this.currProductId = this.todayNewProducts[index].params.id
			// 	this.currProductUrl = this.todayNewProducts[index].link
			// },
			initSet() {
				var that = this
				clearInterval(this.timer1);
				/*
					计算总宽度和每个item的宽度
					item宽度 = 自身宽度 + 10px右边距+2px 边框
					总宽度 = item个数 * 每个item的宽度
				*/
				this.tabTopList.shift()

				this.tabTopList = this.tabTopList.concat(this.tabTopList.concat(this.tabTopList))


				//计算滚动
				let getWindowInfo = uni.getWindowInfo()
				let topWidth = getWindowInfo.screenWidth - 20 - 30; //屏幕高度-边距-间隔距离
				//计算今日新品宽度
				// this.newImangeWidth=topWidth/6
				//4个半 计算每个的宽度
				this.scrollItemWidth = topWidth / 4.5;
				this.scrollItemHeight = this.scrollItemWidth * 323 / 262
				this.firstScrollItemWidth = this.scrollItemWidth + 20
				//计算宽度
				let num = this.tabTopList.length;
				this.itemWidth = this.scrollItemWidth + 10;
				this.totalWidth = num * this.itemWidth;
				this.offsetStart = this.scrollItemWidth + 20;
				this.offsetL = "-" + this.totalWidth / 3 + "px";
				this.offsetStartPx = this.scrollItemWidth + 20 + "px";

				this.$nextTick(() => {
					this.animationState = "running"
					let length = this.singleHotPorducts.length
					this.activeWidth = 280 / length * 1
				})
				this.setSwiperHeight();
			},
			tabScroll(e) {},
			changeswiper(e) {
				this.todayKey = e.detail.current
			},
			move() {
				let dom = uni.createSelectorQuery().select(".ul");
				dom.boundingClientRect((data) => {
					const oleft = data.left;
					const uwidth = data.width
					if (oleft < -uwidth / 2) {
						// 向左走时，判断图片是否走完（这里本来时4张图片，加上后面追加的4张相同的，共有8张，所以需要用ul的总宽度来除以2进行判断），走完时重新开始
						this.ulLeft = 0;
					}
					if (oleft > 0) {
						// 向右走时，判断图片是否走完
						this.ulLeft = -uwidth / 2;
					}
				}).exec()

				// 设置偏移位置
				this.ulLeft = this.ulLeft + this.spa;
			},
			handleCate(item) {
				console.log('=====item============');
				console.log(item);
				if (item.is_tab == 0) {
					uni.navigateTo({
						url: item.link + "?id=" + item.params.id
					})
					return
				}
				wx.reLaunch({
					url: item.link + "?id=" + item.params.id
				})
			}
		},
		computed: {
			...mapGetters(['sysInfo', 'appConfig', 'cityInfo', 'distribution', 'configCode', 'showLoading']),
			indexDistribution(){
				if(this.distribution && this.distribution.distribution_agent_name){
					console.log('====indexDistribution===this.distribution==============');
					return this.distribution;
				}
				if(this.$store.getters.distribution && this.$store.getters.distribution.distribution_agent_name){
					console.log('====indexDistribution==this.$store.getters.distribution=========');
					return this.$store.getters.distribution;
				}
				let cache_distribution = Cache.get(DISTRIBUTION);
				if(cache_distribution && cache_distribution.distribution_agent_name){
					console.log('==/index.vue==computed==indexDistribution==cache_distribution========');
					return cache_distribution;
				}
				return '';
			},
			myDistribution(){
				return Cache.get(MYDISTRIBUTION);
			},
			headerStyle() {
				const {
					active,
					cateList,
					appConfig
				} = this
				let bg = cateList[active].bg_image
				if (active == 0) {
					bg = appConfig.index_setting.top_bg_image
				}
				return bg ? {
					'background-image': `url(${bg})`
				} : {}

			}
		}
	}
</script>

<style lang="scss">
	.fixed-button {
		position: fixed;
		/* 固定在屏幕上 */
		bottom: 25%;
		/* 距离屏幕底部的距离 */
		right: 35rpx;
		/* 圆角，使其看起来更像一个圆形按钮 */
		z-index: 99;
		/* 提高层级，确保按钮在其他内容之上 */
		display: flex;
	}

	.down_icon {
		z-index: 99999;
		position: relative;
		bottom: 216rpx;
		// bottom: 11vh;
		// height: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.small_icon {
			// width: 36rpx !important;
			// height: 20rpx !important;
		}
	}

	.choose_box {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.choose_button {
			z-index: 999;
			position: relative;
			bottom: 17vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 66rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			color: $-color-black;
			background-color: $-color-body;
		}
	}

	page {
		padding: 0;
	}

	.login {
		height: calc(100vh - var(--window-bottom));
		background: #fff;
		text-align: center;
	}

	.index-bg {
		/*background-image: url('../../static/images/index_bg.png');*/
		// background-color: #F6F6F6;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.index {

		// min-height: calc(100vh - var(--window-bottom));
		.u-navbar {
			::v-deep .u-search {
				padding: 0 30rpx;
			}
		}

		// 胶囊提示
		.capsule-tips {
			width: 584rpx;
			color: #FFFFFF;
			padding: 12rpx 18rpx;
			border-radius: 14rpx;
			background: rgba(0, 0, 0, 0.7);
			position: relative;
			position: absolute;
			z-index: 999;
			bottom: -80rpx;
			right: -150rpx;
		}

		.capsule-tips::after {
			content: '';
			border-bottom: 14rpx solid rgba(0, 0, 0, 0.7);
			border-right: 14rpx solid transparent;
			border-left: 14rpx solid transparent;
			position: absolute;
			top: -14rpx;
			right: 88rpx;
		}

		.header-one {
			padding-left: 10px;
		}

		.logo_text {
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			margin-left: 16rpx;
			justify-content: flex-start;
			align-items: flex-start;
			opacity: 0.9;

			.logo {
				margin-right: 10rpx;
			}

			.logo_name {
				font-size: x-large;
				color: white;
			}
		}

		// .header-one{
		// 	border: 1px solid red;
		// }

		.cate-btn {
			padding: 12rpx 16rpx 12rpx 20rpx;
			border-radius: 60rpx 0 0 60rpx;
			background-color: rgba(256, 256, 256, .4);
		}
	}

	//最新
	.index {

		// min-height: calc(100vh - var(--window-bottom));
		.u-navbar {
			::v-deep .u-search {
				padding: 0 30rpx;
				color: red;
				background-color: #2E8B47;
			}
		}

		// 胶囊提示
		.capsule-tips {
			width: 584rpx;
			color: red;
			padding: 12rpx 18rpx;
			border-radius: 14rpx;
			background: rgba(0, 0, 0, 0.7);
			position: relative;
			position: absolute;
			z-index: 999;
			bottom: -80rpx;
			right: -150rpx;
		}

		.capsule-tips::after {
			content: '';
			border-bottom: 14rpx solid rgba(0, 0, 0, 0.7);
			border-right: 14rpx solid transparent;
			border-left: 14rpx solid transparent;
			position: absolute;
			top: -14rpx;
			right: 88rpx;
		}

		.header-one {
			padding-left: 10px;
			margin-top: 10rpx;
		}

		// .header-one{
		// 	border: 1px solid red;
		// }

		.cate-btn {
			padding: 12rpx 16rpx 12rpx 20rpx;
			border-radius: 60rpx 0 0 60rpx;
			background-color: rgba(256, 256, 256, .4);
		}
	}

	.index .posterbar {
		margin: 10rpx 20rpx 0;
	}

	.index .posterbar image {
		width: 100%;
	}

	.tabTop {
		margin: 15rpx auto 0;
	}

	/* 隐藏滚动条样式 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
	}

	.box {
		display: flex;
		align-items: center;
	}

	.tabTopItem:last-child {
		margin-right: 10px;
	}

	.tabTopItem {
		text-align: center;
		height: auto;
		overflow: hidden;
		font-size: 28rpx;
		color: #8D9199;
		position: relative;
		border: 1px solid #d2d2d2;
		margin-left: 10px;
		background: #efefef;

		.itembar {
			width: 100px;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;


			flex-direction: column;
			font-size: 28rpx;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 0;
			}
		}


	}

	.ac {
		// background:#fff;
	}

	.quality-assurance {
		margin: 40rpx 20rpx 20rpx;
		background: #fff;
		height: auto;
		overflow: hidden;
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		.quality-title {
			font-size: 38rpx;
			text-align: center;
		}

		.quality-icons {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 80rpx;

			.icon-item {
				font-size: 26rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				u-image {

					margin-bottom: 20rpx;
				}
			}

		}

		.more {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 60rpx;
			width: 260rpx;
			border-radius: 30rpx;
			margin: 30rpx auto 0;
			border: 1px solid #000;
		}



	}

	.quality2 {
		background: #fff;
		margin: 10px;

		// padding:100rpx 0 100rpx 60rpx ;
		.quality-txt1 {
			font-size: 32rpx;

		}

		.quality-txt2 {
			font-size: 28rpx;
			margin-top: 60rpx;
			margin-bottom: 20rpx;
		}

		.quality-txt1 {
			font-size: 30rpx;
		}
	}

	.today-new-product {
		position: relative;
		text-align: center;

		.bigImg {
			height: 94vh;
		}

		.title {
			margin-bottom: 40rpx;
		}

		.preview-image-bar {
			width: 100%;
			height: auto;
			overflow: hidden;

			.preview-image {
				width: 100%;
				height: 100vh;
				// height:calc(100vw*1181/991);
				// will-change: transform;
			}
		}

		.thumb-images {
			position: relative;
			top: -80rpx;

			.thumb-item {
				box-sizing: border-box;
				margin-left: 5px;
				height: 285rpx;

				// border: 1px solid #f6f6f6;
				.thumb {
					width: 210rpx;
					height: 242rpx;
					margin: 5rpx 15rpx;
				}

				&.currs {
					border: 1px solid #d4d3d1;
				}
			}

			.swiper-item-view {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
				width: 700rpx;
				overflow: hidden;
				margin-left: 10rpx;
			}

			.thumb-item:first-child {
				margin-left: 0
			}
		}
	}

	.category-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 40rpx;

		.category-item {
			// background-color: #FFFFFF;//0.824
			// width: 200rpx;
			// height: 148rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;
			flex: 1 1 calc(33.333% - 2rpx); /* 初始设置为3列，减去一些间隔 */
			margin: 1rpx; /* 间距，可根据需要调整 */
			.category-title {
				position: relative;
				left: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: smaller;
			}

		}
	}

	.index_block {
		margin-top: 160rpx;
		margin-bottom: 40rpx;

		.block_title {
			padding-top: 20rpx;

			.title {
				font-size: 56rpx;
				color: #000;
				text-align: center;
				width: 100%;
				padding-bottom: 10rpx;
			}

			.title_sub {
				color: $-color-muted;
				letter-spacing: 4rpx;
				text-align: center;
				width: 100%;
				padding-bottom: 10rpx;
			}
		}

		.block_content {

			// margin-top: 30rpx;
			.block_main_image {

				// margin-top: 20rpx;
				.image_title {
					// position: relative;
					// top: -160rpx;
					color: white;
					font-size: x-large;
					display: flex;
					justify-content: center;
				}
			}

			.block_bottom {
				margin-top: 30rpx;
				margin-bottom: 60rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.block_bottom_text {
					font-size: large;
					color: $-color-black;
					text-align: center;
					width: 100%;
					padding-bottom: 20rpx;
				}

				.block_bottom_link {
					border-bottom: $-color-normal 2rpx solid;
					// color: $-color-normal;
					text-align: center;

					.block_bottom_link_icon {
						margin-left: 10rpx;
						color: $-color-normal;
					}
				}
			}

		}

	}

	// 夏季新品
	.summer-hot-product {
		// position: relative;
		margin-top: 100rpx;
		padding: 0rpx 20rpx;

		.title {
			font-size: 38rpx;
			color: #000;
			text-align: center;
			width: 100%;
			padding-bottom: 20rpx;
		}

		.title_sub {
			color: $-color-muted;
			font-size: medium;
			letter-spacing: 4rpx;
			// font-weight: bold;
			text-align: center;
			width: 100%;
			padding-bottom: 40rpx;
		}

		.more {
			text-align: center;
			border: 1px solid #000;
			height: 70rpx;
			line-height: 70rpx;
			width: 440rpx;
			margin: 30rpx auto 80rpx;
			font-size: 26rpx;
			font-weight: bold;
			// border-radius:30rpx;
		}
	}

	.container {
		width: 1200px;
		/* 相对定位 */
		position: relative;
		/* 溢出隐藏 */
		overflow: hidden;
	}

	.container .ul {
		width: 1200px;
		height: auto;
		overflow: hidden;
		display: flex;
		position: relative;

		/*动画名称为moving 动画时长5s 匀速运动 无限循环*/
		animation: moving 2s linear infinite;

	}

	@keyframes moving {
		from {
			// transform: translatex(var(--mystart));
			transform: translatex(0);
		}

		to {
			transform: translatex(var(--myfirst));
		}
	}

	.container .ul:hover {
		animation-play-state: paused;
	}

	.container .li {
		margin-right: 10px;
		display: flex;

		flex-direction: column;

		.cat-title {
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: 14px;
		}

	}

	.container .li:first-child {
		margin-left: var(--mystartpx);
		// margin-left:120px;
	}

	.container .li image {
		width: 100px;
		height: 128px;
		/* 保持原有尺寸比例，裁切长边 */
		object-fit: cover;
		/* 图片定位正中间 */
		object-position: center;
	}

	.container .fixed {
		position: absolute;
		background: #f6f6f6;
		padding-left: 10px;
		z-index: 869;
		display: flex;
		flex-direction: column;

		.fiximg {
			// width:100px;
			// height:auto;
		}
	}

	.more-products {
		.title {
			font-size: 38rpx;
			text-align: center;
			width: 100%;
			// margin-top: 40rpx;
			padding-top: 40rpx;
		}
	}

	.list {
		position: relative;
		top: -70rpx;
		margin: 0rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;

		.list-item {
			width: 47.5%;
			background: #fff;
			margin-bottom: 10rpx;
			margin-top: 20rpx;

			.thumb {
				z-index: -10;
				width: 100%;
				height: 180px;
				//margin: 0 auto;
				display: block;
			}

			.heart_icon_badge {
				z-index: 99;
				position: relative;
				bottom: -70rpx;
				left: 270rpx;

			}

			.product-title {
				margin-top: 30rpx;
				padding-left: 20rpx;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.con {
				display: flex;
				padding-left: 20rpx;
				margin-top: 16rpx;
				display: flex;

				.price {
					color: $-color-black;
				}
			}
		}

	}


	mescroll-top image {
		bottom: 100px !important;
	}
</style>